<template>
    <div>
        <div class="container">
            <h1>我的收藏文章</h1>
        </div>

        <div class="container">
            <!-- 使用 PaginationList 组件 -->
            <PaginationList :data="collectedArticles" title="收藏文章列表" v-model:pageSize="pageSize"
                v-model:currentPage="currentPage" v-model:total="total" @page-change="change">
                <!-- 自定义列表项展示 -->
                <template #default="{item }">
                    <ArticleCard :article="item" @click="handleCardClick(item)" class="clickable-card">
                    </ArticleCard>
                    <el-button type="primary" @click.stop="handleCardClick(item)">查看</el-button>
                </template>
            </PaginationList>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import require from '../require';
import { onMounted } from 'vue';
import PaginationList from '../components/PaginationList.vue';
import { UserStore } from '../store/user';
import { useRouter } from 'vue-router';
// 引入 ArticleCard 组件
import ArticleCard from '../components/ArticleCard.vue';

const router = useRouter();

const pageSize = ref(10); // 每页显示的数量
const currentPage = ref(1); // 当前页码
const total = ref(10); // 总数量

const collectedArticles = ref([]);

// 页面加载完成后获取数据
onMounted(async () => {
    collectedArticles.value = await queryCollectedArticle(0, pageSize.value);
    
    const store = UserStore();    
    total.value = store.userInfo.collectedArticleAmount;
    
    console.log(collectedArticles.value)
});

const queryCollectedArticle = async (start, size) => {
    const res = await require.post('user/queryCollectedArticle', {
        start: start,
        size: size,
    });
    const alist = [];
    for (let i = 0; i < res.articleAmount; i++) {
        const e = res.articleList[i];
        alist.push({
            articleId: e.articleId,
            title: e.title,
            author: e.author.nickName,
            updateTime: e.updateTime,
            likedAmounts: e.likedAmounts, 
            collectedAmounts: e.collectedAmounts,
            commentedAmounts: e.commentedAmounts,
            currentUserCollect: e.currentUserCollect,
            currentUserLike: e.currentUserLike,
            creatorName: e.author.nickName,
            creatorId: e.author.userId,
        })
    }
    return alist
}

const change = async (page) => {
    console.log(`当前页码已变更为: ${page}`);

    collectedArticles.value = [];

    collectedArticles.value = await queryCollectedArticle((page - 1) * pageSize.value, pageSize.value);

    const store = UserStore();

    total.value = store.userInfo.collectedArticleAmount;

    console.log(collectedArticles.value)
}

// 处理行点击事件
const handleCardClick = (article) => {
    // 生成包含 query 参数的路由对象
    const r = router.resolve({
        name: 'HisArticle', // 文章详情页路由名
        query: {
            articleId: article.articleId, // 文章 ID
        }
    });
    // 在新标签页打开路由链接
    window.open(r.href, '_blank');
};
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.container {
    display: flex;
    flex-direction: column;/* 将主轴方向改为垂直 */
    justify-content: center;/* 默认主轴开始对齐 */
    align-items: center;/* 默认交叉轴开始对齐 */
    padding: 20px;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    background-color: #f0f0f0;
    /* 鼠标悬停时的背景颜色，可根据需求调整 */
}

.label {
    font-weight: bold;
    margin-right: 10px;
    text-align: right;
    color: #606266;
    margin-top: 10px ;
}
</style>
